<template>
  <div
    class="homeindex"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="loading"
    infinite-scroll-distance="10"
  >
    <home-top :flag="bgFlag" :bg="bgStyle" :select="{ num: 0 }" />
    <div class="zhanwei"></div>
    <div class="swiper">
      <mt-swipe :auto="4000" @change="handleChange" :speed="500">
        <mt-swipe-item v-for="item in swiperData" :key="item.id">
          <img :src="item.pic" alt="" width="100%" />
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div style="clear: both"></div>
    <!-- 金刚区 -->
    <div class="home-sort-page">
      <mt-swipe :auto="0">
        <mt-swipe-item
          class="nav-page"
          v-for="(item, index) in homeNavDatas"
          :key="index"
        >
          <ul>
            <li v-for="i in item" :key="i.id">
              <img :src="i.pic" alt="" />
              <span>{{ i.title }}</span>
            </li>
          </ul>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 商城热点 -->
    <div class="home-index-news">
      <div class="news">
        <div class="hot-icon">
          <img :src="imgUrl" alt="" />
        </div>
        <van-swipe
          style="height: 5rem"
          :touchable="false"
          autoplay="3000"
          vertical
          :show-indicators="false"
        >
          <van-swipe-item
            style="line-height: 5rem"
            v-for="(item, index) in newsList"
            :key="index"
            class="swipe-item"
          >
            {{ item.tit }}
          </van-swipe-item>
        </van-swipe>
        <i class="iconfont icon-xiaojiantou"></i>
      </div>
    </div>
    <!-- 开学季 -->
    <div class="slide">
      <img
        src="https://x.dscmall.cn/storage/data/gallery_album/original_img/CPvH5WHHbF0EoG9XjRQbbT3knMVCeEt9DlYGQhJM.png?imageView2/2/format/webp"
        alt=""
        width="100%"
      />
    </div>

    <!-- 秒杀区 -->
    <div class="seckill">
      <div class="seckill-header">
        <div>
          <img
            src="https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978468241.png?imageView2/2/format/webp"
            alt=""
          />
        </div>
        <div class="djs">
          <span>{{ hour }}</span
          >: <span>{{ minute }}</span
          >:
          <span>{{ second }}</span>
        </div>
        <div class="more">
          更多
          <i class="iconfont icon-xiaojiantou"></i>
        </div>
      </div>
      <div class="seckill-body">
        <ly-tabs class="seckill-tabs">
          <ly-tab-item
            v-for="item in homeVisual"
            :key="item.id"
            :title="item.goods_name"
            class="seckill-item"
          >
            <img :src="item.goods_thumb" alt="" />
            <p>{{ item.goods_name }}</p>
            <p class="price">
              {{ item.shop_price_formated }}
            </p>
            <s>{{ item.shop_price_formated }}</s>
          </ly-tab-item>
        </ly-tabs>
      </div>
    </div>
    <!-- 拼团专区 -->
    <div class="visual">
      <div class="visual-cont">
        <div class="visual-header">
          <h1>拼团专区</h1>
          <span>拼着买更实惠</span>
          <i class="iconfont icon-xiaojiantou"></i>
        </div>
        <div class="visual-body">
          <ly-tabs class="visual-tabs">
            <ly-tab-item
              v-for="item in homeVisual"
              :key="item.id"
              :title="item.goods_name"
              class="visual-item"
            >
              <img :src="item.goods_thumb" alt="" />
              <p>{{ item.goods_name }}</p>
              <p class="price">
                <img
                  src=""
                  alt=""
                />
                {{ item.shop_price_formated }}
              </p>
              <s>{{ item.shop_price_formated }}</s>
            </ly-tab-item>
          </ly-tabs>
        </div>
      </div>
    </div>

    <list
      :show="true"
      @changeTab="getTabData"
      :list="homeData"
      :tabData="tabData"
    />
  </div>
</template>

<script>
import homeTop from "../homeTop";
import homeData from "@/mock/homeData.json";
import homeVisual from "@/mock/homeVisual.json";
import homeNavDatas from "@/mock/homeQuicKNav.json";
import img from "@/assets/177_P_1597978466633 (1).png";
import Category from "../category";
import HomeHeader from "../homeHeader";
import List from "./list.vue";
import { homeListApi } from "@/api/home.js";
export default {
  components: {
    Category,
    HomeHeader,
    List,
    homeTop,
  },
  created() {
    setInterval(() => {
      this.countDown();
    }, 1000);
    this.shopList();
  },
  data() {
    return {
      tabData: [
        {
          id: "001",
          tit: "精选",
          desc: "为你推荐",
          type: "is_best",
        },
        {
          id: "002",
          tit: "社区",
          desc: "新奇好物",
          type: "",
        },
        {
          id: "003",
          tit: "新品",
          desc: "潮流上新",
          type: "is_new",
        },
        {
          id: "004",
          tit: "热卖",
          desc: "火热爆款",
          type: "is_hot",
        },
      ],
      homeData: [],
      swiperData: [
        {
          id: "001",
          pic: "https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978394783.jpg",
        },
        {
          id: "002",

          pic: "https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978396430.jpg",
        },
        {
          id: "003",

          pic: "https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978395241.jpg",
        },
        {
          id: "004",

          pic: "https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978395260.jpg",
        },
        {
          id: "005",

          pic: "https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978397105.jpg",
        },
      ],
      bg: [
        { background: "#e43124" },
        { background: "#e43124" },
        { background: "#3c81ff" },
        { background: "#028379" },
        { background: "#3c81ff" },
      ],
      bgStyle: { background: "#e43124" },
      bgFlag: true,
      homeNavDatas: homeNavDatas.homeNavDatas,
      homeVisual: homeVisual.homeVisual,
      imgUrl: img,
      newsList: [
        {
          id: 11,
          tit: "服务店突破2000多家",
        },
        {
          id: 12,
          tit: "三大国际腕表品牌签约",
        },
        {
          id: 13,
          tit: "我们成为中国最大家电零售B2B2C系统",
        },
      ],
      hour: 0,
      minute: 0,
      second: 0,
      page: 1,
      size: 10,
      type: "is_best",
    };
  },

  mounted() {
    if (document.documentElement.scrollTop > 85) {
      console.log("123");
      this.bgFlag = false;
    }
    this.countDown();
  },
  destroyed() {},
  methods: {
    handleChange(val) {
      this.bgStyle = this.bg[val];
    },
    countDown() {
      let date = new Date().getTime();
      let date1 = new Date("2022-06-28 15:16:00").getTime();
      //   hour:0,
      // minute:0,
      let secondSum = parseInt((date1 - date) / 1000);
      let second = parseInt(secondSum % 60);
      let minute = parseInt((secondSum / 60) % 60);
      let hour = parseInt((secondSum / 3600) % 24);
      this.second = second > 9 ? second : "0" + second;
      this.minute = minute > 9 ? minute : "0" + minute;
      this.hour = hour > 9 ? hour : "0" + hour;
    },
    shopList() {
      homeListApi({
        size: this.size,
        page: this.page,
        type: this.type,
      })
        .then((res) => {
          console.log(res);
          this.homeData = this.homeData.concat(res.data.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getTabData(value) {
      this.homeData = [];
      this.type = value.type;
      this.page = 1;
      this.shopList();
    },
    // https://github.com/cloudhao1999/cloud-app-admin
    loadMore() {
      console.log("触底触底");
      this.page++;
      this.shopList();
    },
  },
  beforeDestroy() {},
  destroyed() {},
};
</script>

<style lang="less" scoped>
.homeindex {
  position: relative;
  .zhanwei {
    height: 8.6rem;
  }
  .swiper {
    // width: 100%;
    // css计算函数  左右之间必须有空格
    width: calc(100% - 2rem);
    height: 12rem;
    border-radius: 1rem;
    margin: 0 auto;
    // margin-top: 8.6rem;
    // position: absolute;
    // top: 10rem;
    // left: 1rem;
    position: relative;
    z-index: 2;
    img {
      width: 100%;
      height: 100%;
      border-radius: 1rem;
    }
  }
  .home-sort-page {
    // margin-top: 7rem;
    height: 20rem;
    width: calc(100% - 2rem);
    margin: 1rem 1rem 0;
    background-color: #fff;
    border-radius: 1rem 1rem 0 0;
    // display: flex;
    // flex-wrap: wrap;
    .nav-page {
      // flex: 1;
      // display: flex;
      // flex-wrap: wrap;
      ul {
        display: flex;
        flex-wrap: wrap;
        height: 18rem;
        justify-content: center;
        align-items: center;
        li {
          width: 20%;
          height: 9rem;
          text-align: center;
          img {
            width: 7rem;
            height: 7rem;
          }
        }
      }
    }

    /deep/ .mint-swipe-indicator {
      margin: 0;
      border-radius: 0;
      width: 15px;
      height: 4px;
      background: #ffdbd5;
      opacity: 0.2;
    }
    /deep/ .mint-swipe-indicator.is-active {
      background: #e43124;
      opacity: 0.8;
    }
  }

  .home-index-news {
    width: calc(100% - 2rem);
    margin: 0 1rem;
    height: 5rem;
    background-color: #fff;
    border-radius: 0 0 1rem 1rem;
    border-top: 1px solid #eee;
    .news {
      display: flex;
      width: 100%;
      height: 100%;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
      position: relative;
      .hot-icon {
        img {
          width: 7rem;
          height: 3rem;
        }
      }
      /deep/ .van-swipe-item {
        white-space: nowrap;
        font-size: 1.4rem;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
      }
      // .news-list {
      //   position: absolute;
      //   // top: 0;
      //   // flex: 1;
      //   left: 8rem;
      //   li {
      //     font-size: 1.4rem;
      //     height: 5rem;
      //     line-height: 5rem;
      //   }
      // }
    }
  }
  .slide {
    width: 100%;
    // height: 18.5rem;
    // background-color: pink;
    box-sizing: border-box;
    padding: 1rem 1rem 0;
  }

  .seckill {
    width: 100%;
    height: 23rem;
    // background-color: pink;
    // margin-top: 1rem;
    .seckill-header {
      height: 3.8rem;
      padding: 1rem 0.8rem;
      box-sizing: border-box;
      background-color: #fff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      img {
        width: 7rem;
      }
      .more {
        width: 5rem;
        border-left: 1px solid #ccc;
        padding-left: 1rem;
      }
      .djs {
        flex: 1;
        color: #000;
        margin-left: 0.5rem;
        span {
          text-align: center;
          line-height: 1.8rem;
          display: inline-block;
          font-size: 1.2rem;
          background-color: #333;
          color: #fff;
          height: 1.8rem;
          width: 2.3rem;
          border-radius: 0.9rem;
        }
      }
    }
    .seckill-body {
      width: 100%;
      height: 19.2rem;
      padding: 0 0.4rem;
      background-color: oldlace;
      box-sizing: border-box;
      .seckill-tabs {
        border: 0;
        height: 19.2rem;
        .seckill-item {
          // height: 19.1rem;
          // width: 5.5rem;
          height: 19.2rem;
          width: 10.7rem;
          padding: 0;
          flex-direction: row;
          img {
            width: 10rem;
          }
          p {
            width: 10rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .price {
            color: #e43124;
            font-weight: 600;
            margin-top: 0.5rem;
            img {
              width: 1.8rem;
              vertical-align: bottom;
            }
          }
          s {
            margin-top: 0.3rem;
            font-size: 1rem;
            color: #888;
          }
        }
      }
    }
  }

  .visual {
    width: 100%;
    height: 27.5rem;
    // background-color: pink;
    overflow: hidden;
    .visual-cont {
      width: calc(100% - 2rem);
      height: 25.5rem;
      margin: 1rem;
      background-color: #fff;
      border-radius: 1rem;
      .visual-header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1px solid #ccc;
        height: 5rem;
        h1 {
          margin: 0 1rem;
          font-size: 1.8rem;
        }
        span {
          font-size: 1.4rem;
          color: #888;
          // align-self: flex-end;
        }
        i {
          color: #e43124;
          border: 1px solid #e43124;
          font-size: 0.8rem;
          border-radius: 50%;
          margin-left: 1rem;
        }
      }
      .visual-body {
        height: 19.1rem;
        padding: 1.5rem 0 0 1rem;
        box-sizing: border-box;
        .visual-tabs {
          border: 0;
        }
        .visual-item {
          // height: 19.1rem;
          // width: 5.5rem;
          width: 11.5rem;
          padding: 0;
          flex-direction: row;
          img {
            width: 11.5rem;
          }
          p {
            width: 11.5rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .price {
            color: #e43124;
            font-weight: 600;
            margin-top: 0.5rem;
            img {
              width: 1.8rem;
              vertical-align: bottom;
            }
          }
          s {
            margin-top: 0.3rem;
            font-size: 1rem;
            color: #888;
          }
        }
      }
    }
  }
}
</style>